<template>
    <view-box ref="viewBox" body-padding-bottom="55px" style="background:#F3F6F7">
        <div style="height:10px;"></div>
        <div class="backg-sume" v-if="resume.basic !== null">
            <div class="Myresu-mian">
                <div class="po-sume-ba" style="width:100%">
                    <div class="pos-img-sum">
                        <div class="">
                            <img style="width:66px;height:66px;margin-top: 10px;border-radius: 100%;" v-if="resume.user" :src="resume.user.avatar" alt="">
                            <div class="pos-my-pae" v-if="resume.sex === 2" style="top:50px;"><i slot="icon"  class="iconfont icon-baina_nv"></i></div>
                            <div class="pos-my-sex" v-if="resume.sex === 1" style="top:50px;"><i slot="icon"  class="iconfont icon-baina_nan"></i></div>
                        </div>
                    </div>
                    <div class="pos-text-sum" style="margin-left:20px;">
                        <p style="font-size:15px;width:100%" v-if="resume.user">{{resume.user.name}}</p>
                        <p style="font-size:15px;color:#32B6C6;width:100%;">{{resume.basic.company}}</p>
                    </div>
                </div>
                <!-- <div class="post-right-bc">
                  <p>{{birth-resume.basic.birth}}岁</p>
                  <p>{{birth-resume.basic.start_work_time}}年工作经验</p>
                  <p>{{resume.basic.city}} - {{resume.basic.area}}</p>
                </div> -->
            </div>
            <div class="wid-sume">
              <p style="font-size:14px;color:#bababa;">座右铭：{{resume.motto}}</p>
            </div>
        </div>

        <div class="border-back-resume" >
            <div style="height:10px;"></div>
            <flexbox orient="vertical" class="bodero" :gutter="0">
                   <div class="resume-personal">
                            <p>个人信息</p>
                            <p align="right" v-if="resume.basic !== null"><i @click="$router.push('/StoreBasic?id='+resume.basic.id)" slot="icon" style="font-size: 20px;color:#32B6C6" class="iconfont icon-bianji"></i></p>
                            <p align="right" v-if="resume.basic === null" ><i @click="$router.push('/StoreBasic')" slot="icon" style="font-size: 20px;color:#32B6C6" class="iconfont icon-bianji"></i></p>
                    </div>
                <flexbox-item >
                    <div class="flex-demo border-bottom-resume" v-if="resume.basic !== null">
                        <div class="" v-if="resume.basic !== null">
                            <p>{{resume.basic.company}}</p>
                            <p style="color: #313131;">
                                <span v-if="resume.sex === 1">男</span>
                                <span v-if="resume.sex === 2">女</span> |
                                <span>{{birth-resume.basic.birth}}岁</span> |
                                <span>{{resume.basic.city}} - {{resume.basic.area}}</span> | 
                                <span>工作{{birth-resume.basic.start_work_time}}年</span>
                            </p>
                        </div>
                    </div>
                </flexbox-item>
                <flexbox-item >
                    <div class="flex-demo border-bottom-resume" v-if="resume.basic !== null">
                        <div class="line-class" v-if="resume.basic !== null">
                            <p>
                                <span><i slot="icon" style="color:#32B6C6;font-size:18px;" class="iconfont icon-weibiaoti-"></i></span>
                                <span style="color:#313131">{{resume.basic.mobile}}</span>
                            </p>
                            <p>
                                <span><i slot="icon" style="color:#32B6C6;font-size:18px;" class="iconfont icon-youxiang"></i></span>
                                <span style="color:#313131">{{resume.basic.mailbox}}</span>
                            </p>
                            <p>
                                <span><i slot="icon" style="color:#32B6C6;font-size:18px;" class="iconfont icon-xinzi"></i></span>
                                <span v-if="resume.basic.is_look_annual_salary === 1" style="color:#313131">{{resume.basic.annual_salary}}</span>
                                <span v-if="resume.basic.is_look_annual_salary === 0" style="color:#313131">薪资保密</span>
                            </p>
                        </div>
                    </div>
                </flexbox-item>
                <flexbox-item >
                    <div class="flex-demo" v-if="resume.basic !==null">
                       <div class="resume-personal" style="align-items: center;height: 40px;">
                            <p style="color:#AEB1B2;">当前状态:</p>
                            <p>{{resume.basic.now_status}}，<i slot="icon" class=""></i></p>
                        </div>
                    </div>
                </flexbox-item>
            </flexbox>
        </div>
        <div class="border-back-resume">
            <div style="height:10px;"></div>
            <flexbox orient="vertical" class="bodero" :gutter="0">
                <div class="resume-personal">
                    <p>工作经历</p>
                </div>
                <flexbox-item v-for="(itemc, index) in resume.work" :key="index" v-if="resume.work !== null">
                    <p align="right" ><i @click="$router.push('/workadd?id='+itemc.id)" slot="icon" style="font-size: 20px;color:#32B6C6" class="iconfont icon-bianji"></i></p>
                    <div class="flex-demo border-bottom-resume">
                        <div class="" >
                            <p>
                                <span style="font-size:14px;font-weight: 600;"> {{itemc.job_title}}      {{itemc.company}}</span>
                            </p>
                            <p style="font-size:13px;color:#313131">{{itemc.start_time}}-{{itemc.over_time}}</p>
                            <p style="font-size:13px;color:#313131">{{itemc.performance}}</p>
                            <p style="font-size:13px;color:#313131">{{itemc.scale}}</p>
                        </div>
                    </div>
                </flexbox-item>
                <flexbox-item >
                    <div class="flex-demo">
                        <div class="resume-personal addclas" @click="$router.push('/workadd')">
                           <p><i slot="icon" style="color:#32B6C6;" class="iconfont icon-jia"></i> <span style="color:#bababa;">添加工作经历</span></p>
                        </div>
                    </div>
                </flexbox-item>
            </flexbox>
        </div>
        <div class="border-back-resume">
            <div style="height:10px;"></div>
            <flexbox orient="vertical" class="bodero" :gutter="0">
                <div class="resume-personal">
                    <p>教育背景</p>
                </div>
                <flexbox-item v-if="resume.education !== null" v-for="(itemc, index) in resume.education" :key="index">
                     <p align="right" ><i @click="$router.push('/Addresume?id='+itemc.id)" slot="icon" style="font-size: 20px;color:#32B6C6" class="iconfont icon-bianji"></i></p>
                    <div class="flex-demo border-bottom-resume">
                        <div class="">
                            <p>
                                <span style="font-size:14px;font-weight: 600;"> {{itemc.school_name}}      {{itemc.major}}</span>
                            </p>
                            <p style="font-size:13px;color:#313131">{{itemc.education}}</p>
                            <p style="font-size:13px;color:#313131">{{itemc.start_time}}-{{itemc.over_time}}</p>
                        </div>
                    </div>
                </flexbox-item>
                <flexbox-item >
                    <div class="flex-demo">
                        <div class="resume-personal addclas" @click="$router.push('/Addresume')">
                            <p><i slot="icon" style="color:#32B6C6;" class="iconfont icon-jia"></i> <span style="color:#bababa;">添加教育背景</span></p>
                        </div>
                    </div>
                </flexbox-item>
            </flexbox>
        </div>
        <div class="border-back-resume" >
            <div style="height:10px;"></div>
            <flexbox orient="vertical" class="bodero" :gutter="0">
                <div class="resume-personal">
                    <p>求职意向</p>
                    <p><i slot="icon" class=""></i></p>
                </div>
                <flexbox-item v-if="resume.intention !== null">
                     <p align="right" ><i @click="$router.push('/intention?id='+resume.intention.id)" slot="icon" style="font-size: 20px;color:#32B6C6" class="iconfont icon-bianji"></i></p>
                    <div class="flex-demo">
                        <div class="">
                            <p>
                                <span style="font-size:14px;color:#000;">期望行业 :</span>
                                <span style="font-size:13px;color:#313131">{{resume.intention.desired_industry}}</span>
                            </p>
                            <p>
                                <span style="font-size:14px;color:#000;">期望职能 :</span>
                                <span style="font-size:13px;color:#313131">{{resume.intention.desired_career}}</span>
                            </p>
                            <p>
                                <span style="font-size:14px;color:#000;">期望地点 :</span>
                                <span style="font-size:13px;color:#313131">{{resume.intention.city}}{{resume.intention.area}}</span>
                            </p>
                            <p>
                                <span style="font-size:14px;color:#000;">期望年薪 :</span>
                                <span style="font-size:13px;color:#313131">{{resume.intention.desired_annual_salary}}</span>
                            </p>
                        </div>
                    </div>
                </flexbox-item>
                <flexbox-item v-if="resume.intention === null">
                    <div class="flex-demo">
                        <div class="resume-personal addclas" @click="$router.push('/intention')">
                             <p><i slot="icon" style="color:#32B6C6;" class="iconfont icon-jia"></i> <span style="color:#bababa;">添加求职意向</span></p>
                        </div>
                    </div>
                </flexbox-item>
            </flexbox>
        </div>
        <div class="border-back-resume" >
            <div style="height:10px;"></div>
            <flexbox orient="vertical" class="bodero" :gutter="0">
                <div class="resume-personal">
                    <p>语言能力</p>
                    <p><i slot="icon" class=""></i></p>
                </div>
                <flexbox-item v-if="resume.language !== null">
                     <p align="right" ><i @click="addlangage(resume.language.id)" slot="icon" style="font-size: 20px;color:#32B6C6" class="iconfont icon-bianji"></i></p>
                    <div class="flex-demo ">
                        <div class="">
                            <p>
                               语言能力　<span style="font-size:13px;color:#313131">{{resume.language.language}}</span>
                            </p>
                        </div>
                    </div>
                </flexbox-item>
                 <flexbox-item v-if="resume.language === null">
                    <div class="flex-demo">
                        <div class="resume-personal addclas" @click="addlangage">
                            <p><i slot="icon" style="color:#32B6C6;" class="iconfont icon-jia"></i> <span style="color:#bababa;">添加语言能力</span></p>
                        </div>
                    </div>
                </flexbox-item>
            </flexbox>
    <div>
      <popup v-model="show1">
        <!-- group already has a top border, so we need to hide header's bottom border-->
        <popup-header
        left-text="取消"
        right-text="完成"
        title="语言"
        :show-bottom-border="false"
        @on-click-left="show1 = false"
        @on-click-right="rightlanguage"></popup-header>
        <group gutter="0">
          <radio :options="['英语', '汉语']" v-model="language"></radio>
        </group>
      </popup>
    </div>
        </div>
        <div class="border-back-resume" >
            <div style="height:10px;"></div>
            <flexbox orient="vertical" class="bodero" :gutter="0">
                 <div class="resume-personal">
                    <p>项目经验</p>
                    <p><i slot="icon" class=""></i></p>
                </div>
                <flexbox-item v-if="resume.project !== null" v-for="(itemc, index) in resume.project" :key="index">
                     <p align="right" ><i @click="$router.push('/project?id='+itemc.id)" slot="icon" style="font-size: 20px;color:#32B6C6" class="iconfont icon-bianji"></i></p>
                    <div class="flex-demo border-bottom-resume">
                        <div class="">
                            <p>
                                <span style="font-size:14px;font-weight: 600;">{{itemc.project_name}}</span>
                            </p>
                             <p>
                                <span style="font-size:14px;font-weight: 600;">{{itemc.corporation}}</span>
                            </p>
                            <p style="font-size:13px;color:#313131">{{itemc.start_time}}-{{itemc.over_time}}</p>
                            <p style="font-size:13px;color:#313131">{{itemc.project_role}}</p>
                            <p style="font-size:13px;color:#313131">{{itemc.project_performance}}</p>
                            <p style="font-size:13px;color:#313131">{{itemc.project_description}}</p>
                        </div>
                    </div>
                </flexbox-item>
                <flexbox-item >
                    <div class="flex-demo">
                        <div class="resume-personal addclas" @click="$router.push('/project')">
                            <p><i slot="icon" style="color:#32B6C6;" class="iconfont icon-jia"></i> <span style="color:#bababa;">添加项目经验</span></p>
                        </div>
                    </div>
                </flexbox-item>
            </flexbox>
        </div>
            <div style="height:10px;"></div>
      <div class="back-border-pos">
          <div class="border-widtrh">
              <p class="left-width-cpp">个人图片简介</p>
              <p class="left-width-cpp1"><label class="right-button-x" v-if="imagesscs !== null" @click="deletec('image')" style="font-size:14px;width:60px;display: inline-block;text-align: center;">清空</label></p>
          </div>
          <div class="widh-img-up">
              <div class="width-up-images" v-for="(item, index) in imagesscs" :key="index">
                  <img class="imga-imgses" :src="$apiUrl + '/storage/' + item" alt="">
                  <!-- <div class="pos-dedate">删除</div> -->
              </div>
              <div class="width-up-images" style="margin-left:10px;">
                  <label for="uploadsss" style="display: inherit;">
                  <label for="uploadsss" style="text-align: center;display: inline-block;" class="jiahao-cop"><i slot="icon" style="font-size: 19px;" class="iconfont icon-jia"></i></label>
                  <input id="uploadsss" style="display: none;" type="file" class="form-control" accept="image/*" @change="cameraChangeous" multiple>
                  </label>
              </div>
          </div>
     <div style="background:#f4f4f4;height:1px;"></div>
        <div class="border-widtrh">
            <p class="left-width-cpp">个人视频简介</p>
            <p class="left-width-cpp1" style="display: flex;justify-content: flex-end;">
                <x-button class="right-button-x" @click.native="deletec('video')" v-if="videos !== null" style="background:#8AB0B4;margin-top:5px;width:40%;font-size:13px;text-align: center;">删除</x-button>
                <label for="posyuc" style="display: inherit;">
                <label for="posyuc" class="right-button-x" style="margin-top:5px;margin-left:5px;width:60px;font-size:13px;text-align: center;">上传</label>
                <input type="file" id="posyuc" accept="video/avi,video/mp4,video/flv,video/3gp,video/swf" capture="camcorder" @change="onFileChange" style="display: none;">
                </label>
            </p>
        </div>
        <div class="lef-gkle">
            <div class="pooswid-dio" v-if="videos !== null">
                <video :src="$apiUrl + videos" class="cosk" width="100%" controls="controls">
               </video>
            </div>
            <div class="pooswid-dio1">
                <p style="font-size:14px;padding-left:10px;">
                    请不要上传大于50M的视频文件。
                </p>
            </div>
        </div>
        <group style="width:92%;margin-left:4%;">
            <x-button style="background:#32B6C6;color:#fff;border:1px solid #32B6C6" @click.native="save()">保存</x-button>
        </group>
       <div style="height:10px;"></div>
     </div>
    </view-box>
</template>
<script>
import { ViewBox, Box, Flexbox, FlexboxItem, XHeader, Timeline, TimelineItem, PopupPicker, Group, Popup, PopupHeader, Radio, XButton } from 'vux'
export default {
  components: {
    ViewBox,
    Box,
    Flexbox,
    FlexboxItem,
    XHeader,
    Timeline,
    TimelineItem,
    PopupPicker,
    Group,
    Popup,
    PopupHeader,
    Radio,
    XButton
  },
  data () {
    return {
      count: 3,
      kong: '',
      show1: false,
      language: '',
      langid: '',
      addpid: '',
      videos: '',
      imagesscs: [],
      resume: {
        position: '',
        sex: 0,
        basic: {
          company: '', // 公司
          birth: '', // 出生年份
          true_name: '', // 真实姓名
          true_name_look: '', // 名称显示 名字   先生/女士 默认名显示字
          current_city: '', // 当前城市
          is_look_annual_salary: '', // 当前年薪是否对hr显示
          mobile: '', // 手机
          annual_salary: '', // 当前年薪
          mailbox: '', // 邮箱
          now_status: '' // 当前状态 是否在职
        },
        work: {
          company: '', // 公司名称
          industry: '', // 公司行业
          job_title: '', // 职位名称
          start_time: '', // 开始时间
          over_time: '', // 结束时间
          performance: '', // 业绩
          report: '', // 汇报对象
          subordinate_number: '', // 下属人数
          nianxin: '', // 年薪
          nature: '', // 公司性质
          scale: '', // 公司规模
          department: '', // 所在部门
          company_introduction: '' // 公司介绍
        },
        education: {
          id: '',
          school_name: '', // 学校名称
          major: '', // 专业名称
          education: '', // 学历
          is_unified: '', // 是否统招 0表示否 1表示是
          start_time: '', // 开始时间
          over_time: '' // 结束时间
        },
        intention: {
          desired_industry: '', // 期望行业
          desired_career: '', // 期望职业
          desired_site: '', // 期望地点
          desired_annual_salary: '' // 期望年薪
        },
        language: {
          language: '' // 语言能力
        },
        project: {
          project_name: '', // 项目名称
          start_time: '', // 开始时间
          over_time: '', // 结束时间
          corporation: '', // 公司名称
          duty: '', // 项目职务
          project_description: '', // 项目描述
          project_role: '', // 项目职责
          project_performance: '' // 项目业绩
        }
      }
    }
  },
  mounted () {
    this._getresume()
    this.refreshResume()
    console.log(this.imagesscs)
    if (!this.$store.state.auth.userInfo) {
      this.$store.dispatch('getUserInfo')
    }
    console.log(this.langid)
  },
  computed: {
    userInfo () {
      return this.$store.getters.userInfo
    },
    avatar () {
      if (!this.userInfo) {
        return null
      }
      if (this.userInfo.avatar.indexOf('http:') === -1) {
        return this.$apiUrl + '/storage/' + this.userInfo.avatar
      }
      return this.userInfo.avatar
    },
    birth: function () {
      let mydate = new Date()
      let newdate = mydate.getFullYear()
      console.log(newdate)
      return newdate
    }
  },
  methods: {
    deletec (types) {
      this.$http.post('/flaunt/delete', {
        type: types
      }).then(response => {
        this._getresume()
      })
    },
    _getresume () {
      this.$vux.loading.show()
      this.$http.get('/resume').then(response => {
        this.$vux.loading.hide()
        this.resume = response.data
        this.addpid = response.data.id
        this.imagesscs = response.data.flaunt.image ? response.data.flaunt.image : null
        this.videos = response.data.flaunt.video ? response.data.flaunt.video : null
        console.log(this.resume)
      }).catch(error => {
        console.log(error)
      })
    },
    rightlanguage () {
      console.log(this.langid)
      if (this.langid > 0) {
        let data = {
          id: this.langid,
          language: this.language
        }
        this.$http.put('/resume/updateLanguage', data).then(response => {
          this.$vux.toast.show({
            text: response.data.message,
            type: 'text'
          })
          this.show1 = false
          this._getresume()
        }).catch(error => {
          console.log(error)
        })
      } else {
        let data = {
          uid: this.userInfo.id ? this.userInfo.id : 0,
          pid: this.addpid,
          language: this.language
        }
        this.$http.post('/resume/storeLanguage', data).then(response => {
          this.$vux.toast.show({
            text: response.data.message,
            type: 'text'
          })
          this.show1 = false
          console.log(response)
        }).catch(error => {
          console.log(error)
        })
      }
    },
    refreshResume () {
      this.$http.put('/resume/refreshResume').then(response => {
        console.log(response)
      }).catch(error => {
        console.log(error)
      })
    },
    addlangage (id) {
      this.langid = id
      this.show1 = true
    },
    shouw () {
      this.$vux.toast.show({
        text: '没有简历',
        type: 'text'
      })
    },
    cameraChangeous (event) {
      var file = event.target.files[0]
      var formdata1 = new FormData()
      formdata1.append('file', file, file.name)
      let config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
      if (file) {
        this.$vux.loading.show()
      }
      this.$http.post(
      '/upload/image',
      formdata1,
      config
      )
      .then(response => {
        console.log(response.data.thumb_img)
        this.imagesscs.push(response.data.thumb_img)
        this.$vux.loading.hide()
      })
      .catch(e => {
        this.$vux.loading.hide()
      })
    },
    onFileChange: function (e) {
      var file = event.target.files[0]
      var formdata1 = new FormData()
      formdata1.append('file', file, file.name)
      let config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
      if (file) {
        this.$vux.loading.show()
      }
      this.$http.post(
      '/upload/video',
      formdata1,
      config
      )
      .then(response => {
        // this.upload(response.data.thumb_img)
        this.videos = response.data.path
        console.log(this.imgtupo)
        this.$vux.loading.hide()
      })
      .catch(e => {
        this.$vux.loading.hide()
      })
    },
    save () {
      let data = {
        image: this.imagesscs,
        video: this.videos
      }
      this.$http.post('/resume/flaunt', data).then(response => {
        this.$vux.toast.show({
          text: response.data.message,
          type: 'text'
        })
        this.$router.push({ path: '/myresume' })
        this.myPrivac()
      }).catch(error => {
        console.log(error)
      })
    }
  }
}
</script>
<style scoped lang="less">
    .backg-sume{
      width: 92%;
      margin-left: 4%;
      background: #fff;
      border-radius: 7px;
    }
     .Myresu-mian{
        width: 92%;
        margin-left: 4%;
        display: flex;
        border-bottom: 1px solid #E6E6E6;
     }
     .pos-my-pae{
        position: absolute;
        height: 25px;
        width: 25px;
        background: #F8849C;
        border-radius: 100%;
        line-height: 25px;
        text-align: center;
        color: #fff;
        top: 45px;
        right: -5px;
    }
    .pos-my-sex{
        position: absolute;
        height: 25px;
        width: 25px;
        background: #32B6C6;
        border-radius: 100%;
        line-height: 25px;
        text-align: center;
        color: #fff;
        top: 45px;
        right: -5px;
    }
    .border-cons{
        border: 1px solid #ffa6a6;
        width: 40%;
        margin-left: 5%;
        margin-bottom: 10px;
        border-radius: 13px;
        background: rgba(225, 225, 225, 0.7);
        padding: 7.2px  21.6px 7.2px  21.6px;
    }
    .line-class p{
        line-height: 25px !important;
    }
    .flex-demo img{
        width: 48.24px;
        height: 50.4px;
    }
    .flex-demo p{
        line-height: 21.6px;
        font-size: 12.446px;
    }
    .border-nav a{
        color: #000;
    }
    .border-back-resume{
        background: #fff;
        border-radius: 7.2px;
        margin-top: 10px;
        width: 92%;
        margin-left: 4%;
    }
    .border-bottom-resume{
        width:90%;
        border-bottom:1px solid #e5e5e5;
        margin-left:19.944px;
        margin-right:19.944px;
    }
    .resume-personal{
        display: flex;
        width: 100%;
        justify-content: space-between;

    }
    .addclas{
        justify-content: center !important;
        height: 40px;
        align-items: center;
    }
.timeline-demo {
    p {
        color: #888;
        font-size: 57.6px;
    }
    h4 {
        color: #666;
        font-weight: normal;
    }
    .recent {
        color: rgb(4, 190, 2)
    }
}
.po-sume-ba{
width: 60%;
display: flex;
}
.pos-img-sum{
    width: 65px;
    position: relative;
}
.pos-text-sum{
    width: 75%;
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding-left: 10px;
}
.post-right-bc{
    width:40%;
    font-size: 13px;
    color: #BABABA;
}
.wid-sume{
    width: 92%;
    margin-left: 4%;
    padding:5px 0px;
}
.bodero{
    width: 92%;
    margin-left: 4%;
}
.back-border-pos{
  background:#fff;
  width: 92%;
  margin-left: 4%;
  border-radius: 7px;
}
.border-widtrh{
    width: 92%;
    margin-left: 4%;
    border-bottom: 1px solid #f4f4f4;
    display: flex;
}
.left-width-cpp{
    width: 50%;
    text-align: left;
    height: 50px;
    line-height: 50px;
}
.left-width-cpp1{
    width: 50%;
    text-align: right;
}
.right-button-x{
    width: 50%;
    height: 35px;
    background: #32B6C6;
    border-radius: 16px;
    color: #fff;
    line-height: 35px;
    margin-top: 8px;
    margin-right: inherit!important;
}
.lef-gkle{
    width: 92%;
    margin-left:4%;
    display: flex;
    padding-bottom: 10px;
}
.pooswid-dio{
    width: 50%;
    margin-top: 10px;
}
.pooswid-dio img{
    width: 100%;
    border-radius: 8px;
    height: 100px;
}
.pooswid-dio1{
    width: 50%;
    display: flex;
    align-items: center;
}
.imga-imgses{
    width: 100%;
    border-radius: 8px;
}
.pos-dedate{
    width: 98%;
    margin-left: 1%;
    height: 92%;
    margin-bottom: 4%;
    border-radius: 8px;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    position: absolute;
    display: flex;
    font-size: 15px;
    color: #fff;
    align-items: center;
    top: 0px;
    left: 0px;
}
.width-up-images{
    width: 18%;
    margin-left: 2%;
    margin-top: 10px;
    position: relative;
}
.jiahao-cop{
    width: 100%;
    color: #32B6C6;
    font-size: 30px;
}
.widh-img-up{
    width: 94%;
    margin-left: 2%;
    display: flex;
    flex-wrap: wrap;
}
</style>
<style>
    .vux-label{
        font-size: 14px !important;
    }
    .weui-cells:before{
        border-top: 0px solid #D9D9D9 !important;
    }
    .weui-cells:after{
        border-bottom: 0px solid #D9D9D9 !important;
    }
    .weui-cell__ft{
        font-size: 14px;
    }
    .weui-cell_access{font-size:14px;}
</style>